import React from 'react';
import {NavLink} from "react-router-dom";
import styled from "styled-components";
import SideMenuItem from "../SideMenuItem/SideMenuItem";
import {SideMenuContainer, SideMenuWrapper} from "./SideMenu.css";
import SideMenuGroup from "../SideMenuGroup/SideMenuGroup";


function SideMenu(props) {
    return (
        <SideMenuContainer>
            <SideMenuWrapper>
                <SideMenuGroup description={"在线音乐"}>
                    <SideMenuItem name={"主页"} to={"/home"}/>
                    <SideMenuItem name={"搜索"} to={"/search"}/>
                </SideMenuGroup>
                <SideMenuGroup description={"我的音乐"}>
                    <SideMenuItem name={"我喜欢"}/>
                    <SideMenuItem name={"最近播放"}/>
                </SideMenuGroup>
                <SideMenuGroup description={"我的歌单"}>
                    {
                        new Array(12).fill(0).map((e,i)=>
                            <SideMenuItem key={i} name={`歌单${i}`}/>
                        )
                    }
                </SideMenuGroup>
            </SideMenuWrapper>
        </SideMenuContainer>
    );
}

export default SideMenu;
